<template>
	<div class="app-contain">
		<head-top></head-top>
		<div class="bg-fff of bg-fa">
			<section class="container">
				<div class="lr-box">
					<article class="lr-e-box lr-e-box-mb">
						<section class="lr-e-wrap ">
							<aside class="lr-bird"> <span class="lr-b-icon"></span> </aside>
							<header class="comm-title">
								<h2 class="tac clearfix"> <span class="c-333">找回密码</span> </h2> </header>
							<section class="fg-step-1" v-show="!showInput">
								<div>
									<ul class="fg-fun-ul" >
										<li class="fg-phone">
											<a href="javascript:void(0)" title="手机找回" @click="forgetMoblie"> <big></big>
												<p class="hLh30 mt10"><span class="fsize16 c-666">手机找回</span></p>
											</a>
										</li>
										<li class="fg-email">
											<a href="javascript:void(0)" title="邮箱找回" @click="forgetEmail"> <big></big>
												<p class="hLh30 mt10"><span class="fsize16 c-666">邮箱找回</span></p>
											</a>
										</li>
									</ul>
									<div class="clear"></div>
								</div>
							</section>
							<section class="fg-step-2" v-show="showInput">
								<section class="lr-ul-wrap">
									<ul class="bm-lr-ul">
										<li id="div_mobile" v-show="showMobile">
											<div class="bm-lr-jy-box" v-show="showValidateMobile">
												<section class="hLh30 ml10 mr10 pr">
													<big title="关闭" class="bm-close" @click="showValidateMobile = false">x</big>
													<div class="DT-arrow"><em>◆</em><span>◆</span></div>
													<em class="icon18 login-err-icon"></em><span class="fsize12 vam ml5" id="error_mobile">请输入正确的手机号！</span>
												</section>
											</div>
											<label>
												<em class="icon18 ml5 user-icon"></em><input type="text" placeholder="请输入手机号码"  maxlength="11" name="" v-model.lazy="loginForm.account" @blur="validMobile">
											</label>
										</li>
										<li id="div_email" v-show="showEmail">
											<div class="bm-lr-jy-box" v-show="showValidateEmail">
												<section class="hLh30 ml10 mr10 pr">
													<big title="关闭" class="bm-close"  @click="showValidateEmail = false">x</big>
													<div class="DT-arrow"><em>◆</em><span>◆</span></div>
													<em class="icon18 login-err-icon"></em><span class="fsize12 vam ml5" id="error_email">请输入正确的邮箱！</span>
												</section>
											</div>
											<label><em class="icon18 ml5 user-icon"></em><input type="text" placeholder="请输入邮箱"  v-model.lazy="loginForm.account" @blur="validEmail"></label>
										</li>

										<li class="lr-yzm-li" id="div_checkCode">
											<label> 
												<aside class="lr-yzm-btn fr"> 
													<a title="获取验证码" href="javascript:void(0)"  @click="getCode">{{codeText}}</a> 
												</aside> 
												<em class="icon18 ml5 pwd-icon"></em><input type="text"  placeholder="动态验证码" v-model.lazy="loginForm.code"> 
											</label>
										</li>
										<li id="div_password">
											<div class="bm-lr-jy-box" v-show="showValidatePassword">
												<section class="hLh30 ml10 mr10 pr"> <big  title="关闭" class="bm-close" @click="showValidatePassword = false">x</big>
													<div class="DT-arrow"><em>◆</em><span>◆</span></div> <em class="icon18 login-err-icon"></em><span class="fsize12 vam ml5" id="error_password">请输入至少六位数正确的密码！</span> 
												</section>
											</div> 
											<label><em class="icon18 ml5 pwd-icon"></em><input type="password"  maxlength="20" placeholder="输入新密码" v-model.lazy="loginForm.password" @blur="validPassword"></label> 
										</li>
										<li id="div_confirm_password">
											<div class="bm-lr-jy-box" v-show='showValidateConfigPass'>
												<section class="hLh30 ml10 mr10 pr"> <big  title="关闭" class="bm-close" @click="showValidateConfigPass = false">x</big>
													<div class="DT-arrow"><em>◆</em><span>◆</span></div> <em class="icon18 login-err-icon"></em><span class="fsize12 vam ml5" id="error_confirm_password">请保证俩次密码输入一致！</span> 
												</section>
											</div> 
											<label><em class="icon18 ml5 pwd-icon"></em><input type="password"  maxlength="20" placeholder="再输一次" name="" v-model.lazy="configPassword" @blur="validConfigPassword"></label> 
										</li>
									</ul>
									<div class="mt30">
										<a title="提交" class="bm-lr-btn fg-step-btn-2" href="javascript: void(0)" @click="submitForgetPassWord">提交</a>
									</div>
								</section>
							</section>
							
						</section>
					</article>
				</div>
			</section>
		</div>
		<foot-bootom></foot-bootom>
	</div>
</template>

<script>
	import { Message } from 'element-ui';
	import { resetPassword, sendMobileCode, sendEmailCode} from '@/api/login'
	import { validateMobile, validateEmail } from '@/utils/validate'
	import headTop from '@/components/header/header'
	import footBootom from '@/components/footer/index'
	export default {
		components: { //引入组件
			headTop,
			footBootom

		},
		name: 'forgetPassword',
		data() {
			return {
				showValidateMobile: false,
				showValidateEmail: false,
				showValidatePassword:false,
				showValidateConfigPass:false,
				showMobile:false,
				showEmail:false,
				showInput:false,//用于显示输入框部门
				loginForm: {
					account: '',
					password: '',
					code:'',
					type:''
				},
				codeValue:"",
				configPassword:"",
				codeText:"获取验证码",
				setGetCode:null,//获取动态码动画
				times:60

			}
		},
		methods: {
			forgetMoblie(){
				this.showInput = true;
				this.showMobile= true;
				this.loginForm.type = 'mobile';
			},
			forgetEmail(){
				this.showInput = true;
				this.showEmail= true;
				this.loginForm.type = 'email';
			},
			validMobile(){
				if(!validateMobile(this.loginForm.account)) {
					this.showValidateMobile = true;
					return false;
				}else{
					this.showValidateMobile = false;
					return true;
				}
			},
			validEmail(){
				if(!validateEmail(this.loginForm.account)) {
					this.showValidateEmail = true;
					return false;
				}else{
					this.showValidateEmail = false;
					return true;
				}
			},

			validPassword(){
				if(this.loginForm.password ==""||this.loginForm.password.length<5){
					this.showValidatePassword = true;
					return false;
				}else{
					this.showValidatePassword = false;
					return true;
				}
			},
			validConfigPassword(){
				if(this.configPassword !== this.loginForm.password){
					this.showValidateConfigPass = true;
					return false;
				}else{
					this.showValidateConfigPass = false;
					return true;
				}
			},
			getCode(){
				let self = this;
				if(self.times == 60){
					if(this.loginForm.type == 'mobile'){
						if(this.validMobile()){
							sendMobileCode(self.loginForm.account).then((res)=>{
								if(res){
									self.setCodesetInterval();	
								}
								
							})
						}else{
							this.validMobile();
							return false;
						}
					}else{
						if(this.validEmail()){
							sendEmailCode(self.loginForm.account).then((res)=>{
								if(res){
									self.setCodesetInterval();	
								}
							})
						
						}else{
							this.validEmail();
							return false;
						}
					}
					
						
				}
				
				
				
			},
			setCodesetInterval(){//定时器
				let self = this;
				self.setGetCode = setInterval(function(){
					self.times --;
					self.codeText = "重新发送"+self.times;
					if(self.times == 1){
						self.times = 60;
						self.codeText = "获取验证码";
						clearInterval(self.setGetCode);
						self.setGetCode = null;
					}
				},1000);	
			},
			submitForgetPassWord(){
				if((this.validMobile()||this.validEmail())&&this.validPassword()&&this.validConfigPassword()){
					resetPassword(this.loginForm).then((res)=>{
						Message({
							message: '找回密码成功!',
							type: 'success'
						});
						console.log(res)
						/*this.$router.push({
							path:'/login'
						});*/
					})
				}
			}
			
		},
		beforeRouteLeave(to, from, next) {

			clearInterval(this.setGetCode);
			this.setGetCode = null;
			next();
		}
	}
</script>

<style scoped lang="scss">
@import 'login';
</style>